<template>
	<view :style="{
			background: styles.img == '' ? styles.colorBg : 'url(' + styles.img + ')',
			marginTop: styles.marginTop + 'px',
			marginBottom: styles.marginBottom + 'px',
			marginLeft: styles.marginLR + 'px',
			marginRight: styles.marginLR + 'px'
		}"
	 :class="['product', styles.type == 1 ? 'two' : styles.type == 2 ? 'three' : '']">
		<view :style="{
				borderRadius: styles.circle + 'px'
			}" v-for="item in 4" :key="item" :class="['detail', styles.type == 3 ? 'four' : '']">
			<view class="detail-picture">
				<image :src="img" mode="aspectFill" style="width: 100%; height: 252px"></image>
			</view>
			<view class="detail-price" :style="{ background: styles.colorProductBg }">
				<view class="detail-price-top">
					<view>
						<view :style="{ color: styles.colorTitle }" class="line-one-p">这里是商品标题</view>
						<view class="line-one-p1">这里是商品副标题</view>
					</view>
				</view>
				<view class="detail-price-bottom">
					<view class="buy">
						<text>
							￥20
							<text class="product-oldprice">￥99</text>
						</text>
						<text v-if="styles.typeBtn == 1" :style="{ fontSize: '22px', color: styles.colorBtn }" class="iconfont iconicon-"></text>
						<text v-if="styles.typeBtn == 2" :style="{ fontSize: '22px', color: styles.colorBtn }" class="iconfont icontianjia"></text>
						<text v-if="styles.typeBtn == 3" :style="{ fontSize: '20px', color: styles.colorBtn }" class="iconfont icontianjiagouwuche"></text>
					</view>
				</view>
			</view>
			<view v-if="styles.typePay == 1" class="pay" :style="{ backgroundImage: 'url(' + pay1 + ')' }">
				<text>{{ styles.typeText }}</text>
			</view>
			<view v-if="styles.typePay == 2" class="pay" :style="{ backgroundImage: 'url(' + pay2 + ')' }">
				<text>{{ styles.typeText }}</text>
			</view>
			<view v-if="styles.typePay == 3" class="pay" :style="{ backgroundImage: 'url(' + pay3 + ')' }">
				<text>{{ styles.typeText }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'product',
		data() {
			return {
				img: '../../../static/tubiao/blank.png',
				pay1: '../../../static/tubiao/pay1.png',
				pay2: '../../../static/tubiao/pay2.png',
				pay3: '../../../static/tubiao/pay3.png'
			};
		},
		props: ['styles']
	};
</script>

<style lang="scss" scoped>
	.two {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		&>view {
			width: 49%;
		}
	}

	.three {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;

		&>view {
			width: 32%;
			margin-right: 2%;
		}

		&>view:nth-of-type(3n) {
			margin-right: 0;
		}
	}

	.four {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.detail-picture {
			width: 40%;
		}

		.detail-price {
			width: 60%;
		}
	}

	.product {
		padding: 5px 5px 0;

		.detail {
			margin-bottom: 10px;
			position: relative;
			overflow: hidden;
			border-radius: 10px;

			.pay {
				position: absolute;
				left: 0px;
				top: 0px;
				color: #fff;
				padding: 5px 20px 5px 10px;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 90%;

				&>text {
					font-size: 12px;
				}
			}

			.detail-picture {
				max-height: 150px;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.detail-price {
				padding: 10px;
				position: relative;
				min-height: 100px;

				.detail-price-top {
					&>view:nth-of-type(1) {
						&>view:nth-of-type(2) {
							font-size: 12px;
							color: #999;
						}
					}

					.line-one-p {

						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
					}

					.line-one-p1 {

						color: #9A9A9A;
						font-size: 22upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						margin-top: 10upx;
					}
				}

				.detail-price-bottom {
					position: absolute;
					left: 10px;
					bottom: 5px;
					width: 100%;
					padding-right: 20px;

					.buy {
						display: flex;
						justify-content: space-between;
						align-items: center;

						&>text {
							color: #FE7486;
							font-size: 32upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
						}

						.product-oldprice {
							margin-left: 9upx;
							font-size: 22upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							text-decoration: line-through;
							color: #9A9A9A;
						}
					}
				}
			}
		}
	}
</style>
